<!-- 页面中间整个通栏 -->
<div id="layout_bg">
    <!-- 居中了一个版心 -->
    <div class="center">
        <!-- 版心里面放了个登录注册的地方 -->
        <div class="loginDiv">
            <!-- 左侧账号密码输入框 -->
            <div class="login_left">
                <!-- 顶部登录方式的选择 -->
                <ul class="login_way">
                    <li class="way active">账号密码登录</li>
                    <li class="way">注册一个新账号</li>
                </ul>
                <!-- 手机号+短信验证登录表单 -->
                <form class="see" action="javascript:void(0)">
                    <ul class="login_info">
                        <li>
                            <div class="icon1"></div>
                            <input type="text" id="username" placeholder="请输入账号">
                        </li>
                        <li>
                            <div class="icon2"></div>
                            <input type="password" id="password" placeholder="请输入密码">
                        </li>
                        <li>
                            <div class="icon3">
                            </div>
                            <input type="password" placeholder="输入你看到的字母">
                        </li>
                    </ul>
                    <!-- 免登陆对钩和忘记密码？ -->
                    <div class="login_check">
                        <div class="check_left">
                            <input type="checkbox">一个月内免登录
                        </div>
                        <div class="check_right">
                            <a href="https://www.7hua.com/Userreg/findbackpass">
                                忘记密码?</a>
                        </div>
                    </div>
                    <!-- 登录按钮 -->
                    <button id="btn" style="margin-left: 35px;">
                        <div class="login_buttom">登录</div>
                    </button>
                </form>
                <!-- 注册表单 -->
                <form action="javascript:void(0)" autocomplete="off">
                    <ul class="login_info">
                        <li>
                            <div class="icon1"></div>
                            <input type="text" id="username1" placeholder="请输入账号">
                        </li>
                        <li>
                            <div class="icon2"></div>
                            <input type="password" id="password1" placeholder="请输入密码">
                        </li>
                        <li>
                            <div class="icon3">
                            </div>
                            <input type="text" placeholder="请确认密码">
                        </li>
                    </ul>

                    <!-- 免登陆对钩和忘记密码？ -->
                    <div class="login_check">
                        <div class="check_left">
                            <input type="checkbox">一个月内免登录
                        </div>
                        <div class="check_right">
                            <a href="https://www.7hua.com/Userreg/findbackpass">
                                忘记密码?</a>
                        </div>
                    </div>
                    <!-- 注册按钮 -->

                    <button id="btn2" style="margin-left: 35px;">
                        <div class="login_buttom">注册</div>
                    </button>
                </form>

                <!-- 注册链接 -->
                <div class="logon">
                    没有注册？
                    <a href="https://www.7hua.com/Userreg/userreg">
                        立即免费注册>>>
                    </a>
                </div>
            </div>
            <!-- 右侧扫码图片展示框 -->
            <div class="login_right">
                <img src="https://www.7hua.com/Tpl/2016skin/Public/images/android_ewm.png" alt="">
                <br>
                下载七彩鲜花APP
                <br>
                惊喜好礼等你拿
                <img src="	https://www.7hua.com/Tpl/2016skin/Public/images/weixin.jpg" alt="">
                <br>
                关注七彩鲜花微信
                <br>
                实时跟踪订单状态
            </div>
        </div>
    </div>
</div>
<script src="./javascripts/jQuery.js"></script>
<script>
    $(function () {
        // 点击切换登录、注册
        for (let i = 0; i < $(".way").length; i++) {
            $(".way").eq(i).on("click.a", function () {
                $(".way").removeClass("active");
                $("form").removeClass("see");
                $(".way").eq(i).addClass("active");
                $("form").eq(i).addClass("see");
                // console.log($("form"))

            })
        }
        // 登录数据跨域请求
        $("#btn").click(function () {
            $.ajax({
                    url: "http://localhost/server/login.php",
                    data: {
                        username: $("#username").val(),
                        password: $("#password").val(),
                    },
                    dataType:"json",
                    type:"POST"
                })
                .done(function (res) {
                    console.log(res)
                    if(res.type === "success"){
                        window.location.href='http://127.0.0.1:5500/dist/index.html';
                    }else{
                        alert("账号或者密码错误")
                    };
                })

        })
        $("#btn2").click(function () {
            $.ajax({
                    url: "http://localhost/server/register.php",
                    data: {
                        username: $("#username1").val(),
                        password: $("#password1").val(),
                    },
                    dataType:"json",
                    type:"POST"
                })
                .done(function (res) {
                    console.log(res)
                    alert("注册成功");
                    window.location.href='http://127.0.0.1:5500/dist/online.html';
                })
        })


    })
</script>